<template>
  <div class="partner-list">
    <div class="left">
      <div class="image">
        <img :src="listData.headimgurl" :class="{ 'has-bg': !listData.headimgurl }" :style="!listData.headimgurl && imageMissBg"/>
        <template v-if="isMultiRank">
          <i class="award-rank" v-if="listData.award === 1" :style="awardRankBg1"></i>
          <i class="award-rank" v-if="listData.award === 2" :style="awardRankBg2"></i>
          <i class="award-rank" v-if="listData.award === 3" :style="awardRankBg3"></i>
        </template>
      </div>
      <div class="detail">
        <div class="name">{{listData.nickname || '无名氏'}}</div>
        <div class="code"><i :style="codeBg"></i>{{listData.code}}</div>
      </div>
    </div>
    <div class="date">{{joinTime}}</div>
  </div>
</template>

<script>
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  props: {
    listData: {
      type: Object,
      default: {},
    },
    // 是否有多个奖项，大于1个
    isMultiRank: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      icons: {
        code: `${require('static/images/code.png')}`,
        imageMissBg: `${require('static/images/image-miss-bg.png')}`,
        awardRank1: `${require('static/images/award-rank1.png')}`,
        awardRank2: `${require('static/images/award-rank2.png')}`,
        awardRank3: `${require('static/images/award-rank3.png')}`
      }
    }
  },
  computed: {
    codeBg () {
      return `background-image: url(${this.icons.code});`
    },
    imageMissBg () {
      return `background-image: url(${this.icons.imageMissBg});`
    },
    awardRankBg1 () {
      return `background-image: url(${this.icons.awardRank1});`
    },
    awardRankBg2 (i) {
      return `background-image: url(${this.icons.awardRank2});`
    },
    awardRankBg3 () {
      return `background-image: url(${this.icons.awardRank3});`
    },
    joinTime () {
      let output
      const time = this.listData.jointime
      if (time) {
        output = this.timeFilter(time)
      }
      return output
    }
  }
}
</script>

<style lang="less" scoped>
.partner-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #e6ebf0;
  background-color: #fff;
  .left {
    display: flex;
    align-items: center;
    flex: 1;
  }
  .image {
    position: relative;
    width: 100rpx;
    img {
      display: block;
      width: 100rpx;
      height: 100rpx;
      border: 1rpx solid #e6ebf0;
      &.has-bg {
        background-size: 53rpx 41rpx;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #fff;
      }
    }
    .award-rank {
      position: absolute;
      top: -30rpx;
      right: -30rpx;
      display: block;
      width: 48rpx;
      height: 48rpx;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
  .detail {
    flex: 1;
    padding: 0 20rpx 0 30rpx;
    .name {
      font-size: 32rpx;
      color: #333;
    }
    .code {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #777;
      margin-top: 10rpx;
      i {
        display: block;
        width: 28rpx;
        height: 28rpx;
        background-size: contain;
        margin-right: 10rpx;
      }
    }
  }
  .date {
    font-size: 26rpx;
    color: #888;
  }
}
</style>
